<template>
	<view>
       
     <view class="box-bg">
     	<uni-nav-bar left-icon="scan">
     		<block color="#333333" background-color="white" left-icon="scan">
     			<view class="city">
     				<view>
     				
     				</view>
     				<uni-icons type="arrowdown" color="#666" size="18" />
     			</view> 
     		</block>
     		<view class="input-view">
     			<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
     			<input confirm-type="search" v-model="gjz" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
     				@confirm="confirm" />
     		</view>
     		<block slot="right">
     			<view class="city" @tap="ss()">
     				搜索
     			</view>
     		</block>
     	</uni-nav-bar>
     </view>
     
     
	<view class="content">
			<uni-swiper-dot @clickItem=clickItem :info="info" :current="current" :mode="mode" field="content" :dotsStyles="dotsStyles">
						<swiper class="swiper-box" @change="change" :current="swiperDotIndex"  :autoplay="autoplay" :interval="interval" :duration="duration" circular="true" previous-margin="20px" next-margin="20px">
							<swiper-item v-for="(item, index) in info" :key="index">
								<view :class="item.colorClass" class="swiper-item">
									<image  :src="item.url" mode="aspectFill" class="image"/>
								</view>
							</swiper-item>
						</swiper>
			</uni-swiper-dot>
		</view>
       
       
     <view class="flexs">
                <view class="flex" @click="upnews(item.id,index)" :class="index== navIndex?'news':''" v-for="(item,index) in navArr"> {{item.title}}</view>
            </view>
       
	<Iidd  v-for="item in iidds" :key="item.id" :di="item" @tap="dt(item)"></Iidd>

	</view>
</template>

<script>
     import Iidd from '@/components/iidd.vue'
	export default {
        components:{
            Iidd
        },
		data() {
			return {
				iidds:[],
				currentId:'',
				 navIndex:'',
				navArr:[
					{id:1,title:'首页'},{id:2,title:'联动要闻'},{id:3,title:'融媒视野'},{id:4,title:'工作动态'},
					{id:5,title:'辟谣访谈'},{id:6,title:'热点专题'}],
                 gjz:'',
                 su:{
                     uid:'',
                     history:'',
                     collect:'',
                     htime:''
                 },
                 indicatorDots: true,
                 				autoplay: true,
                 				interval: 3000,//切换的间隔时间
                 				duration: 1000,//滑动动画时长
                 				current: 0,
                 				mode: 'round',//default 、round 、indexes、nav
                 				swiperDotIndex: 0,
                 				dotsStyles:{
                 						backgroundColor: 'rgba(255, 90, 95,0.3)',
                 						border: '1px rgba(255, 90, 95,0.3) solid',
                 						color: '#fff',
                 						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
                 						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
                 					},
                 					info: [{
                 							url: '/static/4.jpg',
                 							content: '内容 A'
                 						},
                 						{
                 							url: '/static/2.jpg',
                 							content: '内容 B'
                 						},
                 						{
                 							url: '/static/3.jpg',
                 							content: '内容 C'
                 						}
                 					],
			}
		},
        onNavigationBarSearchInputChanged(val) {
            console.log(val)
        	// axios.get('/storeinformation/queryallstoreinfod/?name='+val.text).then((res)=>{
        	//     console.log(res.data)
        	//     this.commodity=res.data.data
        	// })
        },
        created() {

            this.initialize()
            const user = uni.getStorageSync('user');
            this.su.uid=user.id
        },
		methods: {
			upnews(id,index){
			              this.currentId=id
			              this.navIndex=index
			              this.find()
			          },
            change(e) {
                this.current = e.detail.current
            },
            clickItem(e) {
                this.swiperDotIndex = e
            },
            confirm(){
                this.request("/hou/biao?biaoti="+this.gjz, 'POST').then((res) => {
                    this.iidds=res.data.data
                })
            },
            ss(){
             this.request("/hou/biao?biaoti="+this.gjz, 'POST').then((res) => {
                 this.iidds=res.data.data
             })
            },
            dt(all){
                 this.su.history=all.id
                this.request("/su/add", 'POST',this.su).then((res) => {
                })
                uni.navigateTo({
                url: '/pages/index/details?suinfo='+ encodeURIComponent(JSON.stringify(all))
                });
            },
            initialize(){
                this.request("/hou/findAll", 'GET').then((res) => {
                    this.iidds=res.data.data
                    
                })
            },
			find(){
				this.request("/hou/kome/"+this.currentId, 'GET').then((res) => {
				    this.iidds=res.data.data
				    console.log(this.iidds)
				})
			}
		}
	}
</script>

<style>
  		.flexs{
  			text-align: center;
  			white-space: nowrap;
  			overflow-x: scroll;
  			overflow-y: hidden;
  					
  	    }
  	    .flex{
  			width: 80px;
  	        height: 30px;
  	        background-color: #1E90FF;
  	        border-right: 1px solid;
  	        white-space: nowrap;
  	        display: inline-block;
  	    }

  page {
  		width: 100%;
  		height: 100%;
  	}
  
  	.content {
  		margin-top: 10px;
  		/* text-align: center; */
  		height: 210px;
  
  	}
  
  	.swiper-box {
  		/* width: 95%; */
  		height: 200px;
  	}
  
  	.swiper-item {
  		/* #ifndef APP-NVUE */
  		display: flex;
  		/* #endif */
  		flex-direction: column;
  		justify-content: center;
  		align-items: center;
  		background-color: #999;
  		color: #fff;
  		margin: 10px;
  		border-radius: 15upx;
  		/* app上运行不显示图片，就需要加下面这行，设置高度 */
  		height: 380upx;
  	}
  	.image {
  		/* width: 750rpx; */
  		height: 380upx;
  		border-radius: 15upx;
  	}
   
    	.box-bg {
    		background-color: #F5F5F5;
            
    	}
    
    	.city {
    		/* #ifndef APP-PLUS-NVUE */
    		display: flex;
    		/* #endif */
    		flex-direction: row;
    		align-items: center;
    		justify-content: flex-start;
    	
    	}
    
    	.input-view {
    		/* #ifndef APP-PLUS-NVUE */
    		display: flex;
    		/* #endif */
    		flex-direction: row;
    		flex: 2;
    		background-color: #f8f8f8;
    		height: $nav-height;
    		border-radius: 15px;
    		padding: 0 15px;
    		flex-wrap: nowrap;
    		margin: 7px 0;
    		line-height: 35px;
    	}
    
    	.input-uni-icon {
    		line-height: 35px;
    	}
    
    	.nav-bar-input {
    		height: 35px;
    		line-height:  35px;
    		/* #ifdef APP-PLUS-NVUE */
    		/* #endif */
    		padding: 0 5px;
    		font-size: 12px;
    		background-color: #f8f8f8;
    	}
            
</style>
